<template>
  <div>
    <div>
      <div data-intro="这是一个标题" data-step="1">这是内容1-1</div>
      <ul data-intro="这是列表" data-step="2">
        <li class="one" id="A" @click.stop="go">点击</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <img
        data-intro="这是一张普通的图片"
        data-step="3"
        src="@/assets/logo.png"
      />
    </div>
    <div class="click-animee"></div>
  </div>
</template>

<script>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import introJs from "intro.js";
import "intro.js/introjs.css";
// import "@/styles/introJs.css";
export default {
  name: "index",
  components: {
  },
  data() {
    return {
      driverObj: null,
      intro: null,
      interval: null,
      showLoading: true,
    };
  },
  created() {
    this.$nextTick(() => {
      this.stopIntro();
      this.stopDriver();
      setTimeout(() => {
        this.startIntro();
      }, 1000);
    });
  },
  // 页面加载时触发
  mounted() {
    // 阻止点击其他区域取消引导
    document.addEventListener("click", this.preventIntroExit, true);
  },
  // 页面关闭时触发
  beforeDestroy() {
    clearInterval(this.interval);
    this.stopIntro();
    this.stopDriver();
    document.removeEventListener("click", this.preventIntroExit, true);
  },
  methods: {
    // 进入下一个页面
    go() {
      this.$router.push({
        path: "/01/register/wx/index3",
      });
    },
    // 点击的引导
    guide() {
      // 定义基本样式
      this.driverObj = driver({
        allowClose: false,
        showProgress: true,
        steps: [
          {
            element: "#A",
            popover: {
              description: "点击此处",
              align: "center",
              position: "bottom",
            },
          },
        ],
      });
      // 开启引导
      this.driverObj.drive();
      // 2秒后显示遮罩和手指
      setTimeout(() => {
        // 遮罩
        const paths = document.querySelectorAll("path");
        // 手指
        const click = document.querySelector(".click-animee");
        paths.forEach((path) => {
          path.classList.add("show-path");
          click.classList.add("isShow");
        });
      }, 2000);
    },
    // 停止页面引导
    stopIntro() {
      if (this.intro) {
        this.intro.exit();
        this.intro = null;
      }
    },
    // 停止点击引导
    stopDriver() {
      if (this.driverObj) {
        this.driverObj.destroy();
        this.driverObj = null;
      }
    },
    // 页面引导
    startIntro() {
      this.intro = introJs();
      this.intro.setOptions({
        prevLabel: "上一步", //上一步按钮
        nextLabel: "下一步", //下一步按钮
        doneLabel: "结束", //结束按钮
        disableInteraction: true, // 禁用用户交互
        position: "center",
      });

      this.intro.onafterchange(() => {
        clearInterval(this.interval);
        // 不操作，3秒自动进入下一步
        this.interval = setInterval(() => {
          this.intro.nextStep();
        }, 3000);
      });

      this.intro.onexit(() => {
        clearInterval(this.interval);
      });
      // 点击结束触发，开启点击引导
      this.intro.oncomplete(() => {
        clearInterval(this.interval);
        setTimeout(() => {
          this.guide(); // 等待一秒后执行 driver.js
        }, 1000);
      });

      this.intro.start();
    },

    preventIntroExit(event) {
      // 获取 intro.js overlay
      const overlay = document.querySelector(".introjs-overlay");
      if (overlay && event.target === overlay) {
        event.stopPropagation();
        event.preventDefault();
      }
    },
  },
};
</script>

<style>
@media screen and (max-width: 440px) {
  .click-animee {
    z-index: 99999;
    display: none;
    position: absolute;
    top: 8vh;
    left: 8vw;
    width: 89px;
    height: 70px;
    background-image: url("@/assets/click.png");
    animation: click-anime 1s steps(24) 0s infinite;
    transform: scale(0.7);
  }
}
@media screen and (min-width: 440px) {
  .click-animee {
    z-index: 99999;
    display: none;
    position: absolute;
    top: 8vh;
    left: 8vw;
    width: 89px;
    height: 70px;
    background-image: url("@/assets/click.png");
    animation: click-anime 1s steps(24) 0s infinite;
    transform: scale(0.7);
  }
}

@keyframes click-anime {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -2134px 0;
  }
}
 .introjs-skipbutton,
.introjs-tooltip-header,
.introjs-bullets {
  display: none !important;
} 
.driver-popover::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -60px;
  width: 60px;
  height: 60px;
  background: url(@/assets/logo.png) no-repeat;
  background-size: contain;
}
path {
  opacity: 0 !important;
  transition: opacity 0.3s ease; /* 根据需要调整过渡时间和缓动效果 */
}
.isShow {
  display: block !important;
}
.show-path {
  opacity: 0.7 !important;
  height: 100% !important;
}
</style>
